{% extends "base.html"%}

{# libreria imagemapster para el mapa #}
{% block codigos %}
  {{ super() }}
  <script type="text/javascript" src="/codigos/jquery.maphilight.min.js"></script>
  <script type="text/javascript">
    {# la documentacion en http://davidlynch.org/projects/maphilight/docs/ #}
    $(function(){
      $('.map').maphilight();
    });
  </script>
{% endblock codigos %}


{% block titulo %}
celebralo.es
{% endblock titulo %}

{% block contenido %}
    <!-- busqueda -->
    <div class="row-fluid">
      <div class="span8 offset2">
	<form class='form-inline' method='get' action='/busqueda'>
	  <input type='text' class='input-xlarge'  name='anuncio' placeholder="buscar anuncio"/>
	  <select>
	    <option>Andalucia</option>
	    <option>Murcia</option>
	  </select>
          <button class="btn" type='submit' value='buscar'>Buscar</button>
	</form>
      </div>
    </div>

   
    <div class="row-fluid">
      <div class="span2">
	{% block ciudades %}
	  <p class="text">top ciudades</p>
	  {% for ciudad in ciudades %}
	  <p class="text-info">{{ciudad.nombre}}</p>
	  {% endfor %}
	{% endblock ciudades %}
      </div>
      
      <div class="span8">
	<img class="map" id="imagen_comunidades" src="/img/comunidades.gif" usemap="#comunidades">
	<map name="comunidades">
	  {# aplicacion para coordenadas: http://www.kolchose.org/simon/ajaximagemapcreator/ #}
	  <area shape="poly" href="/busqueda?categoria=galicia" 
		coords="70,24,66,35,70,45,73,51,74,56,79,61,80,65,76,74,79,85,90,
			77,98,79,99,88,104,93,114,89,118,93,132,91,138,90,140,78,
			146,72,143,64,138,60,144,49,145,40,142,37,146,31,142,27,
			138,23,143,15,133,13,124,7,115,5,108,10,98,11,93,21,83,23,
			79,21,75,25,74,24" 
		id="GA">
	</map>
      </div>

      <div class="span2">
	publicidad
      </div>
    </div>



{% endblock contenido %}
